$selectbar-background-color: var(--rz-base-backgorund-color) !default;
$selectbar-color: var(--rz-text-color) !default;
$selectbar-border: var(--rz-border-normal) !default;

$selectbar-selected-background-color: var(--rz-secondary) !default;
$selectbar-selected-color: var(--rz-text-contrast-color) !default;
$selectbar-selected-border: var(--rz-border-secondary) !default;
$selectbar-border-radius: var(--rz-border-radius) !default;

$selectbar-sizes: xs, sm, md, lg;

// SelectBar CSS variables

:root {
  --rz-selectbar-background-color: #{$selectbar-background-color};
  --rz-selectbar-color: #{$selectbar-color};
  --rz-selectbar-border: #{$selectbar-border};
  
  --rz-selectbar-selected-background-color: #{$selectbar-selected-background-color};
  --rz-selectbar-selected-color: #{$selectbar-selected-color};
  --rz-selectbar-selected-border: #{$selectbar-selected-border};
  --rz-selectbar-border-radius: #{$selectbar-border-radius};
}

.rz-selectbutton {
  display: inline-flex;
}

@each $size in $selectbar-sizes {  //.rz-selectbutton .rz-button.rz-button-md
  .rz-selectbutton .rz-button.rz-button-#{$size} {
    margin-left: -1px;
    display: inline-block;
    background-color: var(--rz-selectbar-background-color);
    color: var(--rz-selectbar-color);
    border: var(--rz-selectbar-border);
    border-radius: 0;

    &:first-child {
      margin-left: 0;
      border-top-left-radius: var(--rz-selectbar-border-radius);
      border-bottom-left-radius: var(--rz-selectbar-border-radius);
    }

    &:last-child {
      border-top-right-radius: var(--rz-selectbar-border-radius);
      border-bottom-right-radius: var(--rz-selectbar-border-radius);
    }

    &.rz-state-active {
      background-color: var(--rz-selectbar-selected-background-color);
      color: var(--rz-selectbar-selected-color);
      border: var(--rz-selectbar-selected-border);
    }
  }
}
